<template>
  <ul class="table-header">
    <li v-show="allcheckbox"><span class="iconfont"></span></li>
    <li
      v-for="(item, index) in thData"
      :key="index"
      :style="'width:'+item.width+'px;'"
    >{{item.title}}</li>
  </ul>
</template>

<script>
export default {
  name: "tableHeader",
  data() {
    return {
      allcheckbox: true,
      //根据thData来渲染表头,title属性决定表头项，width属性决定每一列的宽度，单位px
      thData: [
        { title: "编号", width: 108 },
        { title: "合同名称", width: 108 },
        { title: "合同类型", width: 205 },
        { title: "合同金额(万元)", width: 129 },
        { title: "标签", width: 104 },
        { title: "签约时间", width: 91 },
        { title: "完工时间", width: 86 },
        { title: "项目负责人", width: 86 },
        { title: "操作", width: 129 }
      ]
    };
  }
  //根据父组件传来的allcheckbox的bool值来决定是否在第一列显示复选框
  //   props: [
  //       allcheckbox
  //   ]
};
</script>

<style>
.table-header {
  width: 1100px;
  margin: 0 0 0 100px;
  display: flex;
  border: 1px solid #e4e4e4;
  background-color: #f9fafc;
  height: 45px;
  line-height: 45px;
  padding: 0;
  list-style: none;
  justify-content: space-between;
}

.table-header li:first-child {
  width: 50px;
}

.table-header li:first-child span {
  border-radius: 5px;
  border: 2px solid #aba2a2;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 12.5px auto;
  line-height: 16px;
  font-size: 16px;
}

.table-header li {
  border-right: 1px solid #e4e4e4;
  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC";
  font-weight: 650;
  font-style: normal;
  font-size: 14px;
  color: #666666;
}
.table-header li:last-child {
  border: none;
}
</style>